<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  /* 实际项目中加这个样式 */
    *, *::before, *::after {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
/* 实际项目中加这个样式 */
main{
  /* 相对定位加z-index是负数的时候不能能点击和滑动，解决这个问题的方法最好别给z-index值，z-index设置在子元素中为正数子元素覆盖父元素，为负数父元素覆盖子元素 */
  position: relative;
  /* 绝对定位能点击和滑动 */
  /* position: absolute; */
  width: 100px;
  height: 100px;
  background-color: red;
  /*  */
  /* z-index:-1 */
}
    .card{
      width: 100px;
      height: 100px;
      background-color: #000;
      position: absolute;
      z-index:2
    }
    main:hover .card{
      background-color:aquamarine;
    }
</style>
<body>
  <main id="main">
    houdunren
  </main>
  
</body>
<script>
    const dommain=document.querySelector("main")
    dommain.onclick=function(e){
      console.log(e,1111);
    }
    
</script>
</html>
